<template>
  <div class="card-wrap">
    <Title title="畅销排行榜">
      <template #small>
        <span style="margin-left: 10px; color: #999; font-size: 12px">按ASIN汇总</span>
      </template>
    </Title>
    <a-button-group class="type-w" size="small">
      <a-button class="group-item"> 销量Top20 </a-button>
      <a-button class="group-item"> 销售额Top20 </a-button>
    </a-button-group>
    <a-table class="table-singe-line" ref="tableRef" :scroll="{ y: 'calc(100vh - 275px)' }" :bordered="false" :data="tableList" style="margin-top: 20px" size="mini" :pagination="false">
      <template #columns>
        <a-table-column :width="50" align="center" title="排名">
          <template #cell="{ rowIndex }">
            <p>{{ rowIndex + 1 }}</p>
          </template>
        </a-table-column>
        <a-table-column :width="60" title="图片" align="center">
          <template #cell>
            <ImgPopover src="https://m.media-amazon.com/images/I/61PMv44X8CS.jpg" :isPre="true">
              <template #con>
                <a-image width="40" :preview="false" height="40" fit="contain" src="https://m.media-amazon.com/images/I/61PMv44X8CS.jpg" />
              </template>
            </ImgPopover>
          </template>
        </a-table-column>
        <a-table-column :width="95" title="ASIN/MSKU">
          <template #cell>
            <p class="highlight">B099N3J918</p>
            <p>YFN97722</p>
          </template>
        </a-table-column>
        <a-table-column :width="115" title="店铺/站点">
          <template #cell>
            <p>hake onefinity:US</p>
            <p style="color: #ccc">美国</p>
          </template>
        </a-table-column>
        <a-table-column :width="70" title="销量" :sortable="{ sortDirections: ['ascend', 'descend'] }">
          <template #cell>
            <p>5</p>
          </template>
        </a-table-column>
        <a-table-column :width="80" title="订单量" :sortable="{ sortDirections: ['ascend', 'descend'] }">
          <template #cell>
            <p>15</p>
          </template>
        </a-table-column>
        <a-table-column :width="80" title="销售额" :sortable="{ sortDirections: ['ascend', 'descend'] }">
          <template #cell>
            <p>$15</p>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import Title from './Title.vue'
  const tableList = ref([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}])
</script>

<style lang="less" scoped>
  .time {
    margin: 10px 0 20px;
    color: #999;
  }
  .arco-btn-group {
    border: 1px solid var(--color-secondary-hover);
  }
  .group-item {
    background-color: #fff;
    line-height: 28px;
    &:hover {
      background-color: #fff;
      color: rgb(var(--primary-6));
    }
  }
  .type-w {
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .target-list {
    display: flex;
    li {
      width: 24%;
      border: 1px solid #eee;
      padding: 10px;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      .title {
        color: #666;
      }
      .total-label {
        margin-left: 5px;
        color: #666;
      }
      .val {
        font-weight: bold;
        font-size: 16px;
      }
    }
  }
  .chart-item {
    height: 300px;
  }
</style>
